<template>
    <div>
        <el-button type="primary" @click="getAdmin()">获取管理员列表</el-button>
        <el-button type="primary" @click="addAdmin()">添加管理员</el-button>
        <!-- <el-button type="primary" @click="getEchartData()">测试ec</el-button> -->
        <div id="main" ref="main" class="main"></div>
    
    </div>
</template>

<script>
// import { getAbc } from '@/api/api';
// import { getAbc } from '@/api/api.js';

import * as echarts from 'echarts';
import { getTbadmin, addAdmin } from "@/api/api.js";
export default {
    name: 'test',

    data() {
        return {
            ArrList: []
        };
    },

    mounted() {
        this.init();
    },
    //
    methods: {
        init() {
            this.$nextTick(() => {
                this.getEchartData();
            });
        },
        getAdmin() {
            // 调用获取用户信息的api请求,并解构出data,重命名为res
            getTbadmin().then((res) => {
                console.log(res)
            }).catch((error) => {
                console.log(res)
            })
        },
        addAdmin() {
            let TbAdmin = { "adId": 2, "adUserName": "test1", "adUserPassword": "123456" }
            console.log(TbAdmin)
            addAdmin(TbAdmin).then((res) => {
                console.log(res);
            }).catch((err) => {
                console.log(err);
            });
        },
        getEchartData() {
            var chartDom = document.getElementById('main');
            var myChart = echarts.init(chartDom);
            var option;

            const colors = ['#5470C6', '#91CC75', '#EE6666'];
            option = {
                color: colors,
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross'
                    }
                },
                grid: {
                    right: '20%'
                },
                toolbox: {
                    feature: {
                        dataView: { show: true, readOnly: false },
                        restore: { show: true },
                        saveAsImage: { show: true }
                    }
                },
                legend: {
                    data: ['Evaporation', 'Precipitation', 'Temperature']
                },
                xAxis: [{
                    type: 'category',
                    axisTick: {
                        alignWithLabel: true
                    },
                    // prettier-ignore
                    data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                }],
                yAxis: [{
                        type: 'value',
                        name: 'Evaporation',
                        position: 'right',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[0]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: 'Precipitation',
                        position: 'right',
                        alignTicks: true,
                        offset: 80,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[1]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} ml'
                        }
                    },
                    {
                        type: 'value',
                        name: '温度',
                        position: 'left',
                        alignTicks: true,
                        axisLine: {
                            show: true,
                            lineStyle: {
                                color: colors[2]
                            }
                        },
                        axisLabel: {
                            formatter: '{value} °C'
                        }
                    }
                ],
                series: [{
                        name: 'Evaporation',
                        type: 'bar',
                        data: [
                            2.0, 4.9, 7.0, 23.2, 25.6, 76.7, 135.6, 162.2, 32.6, 20.0, 6.4, 3.3
                        ]
                    },
                    {
                        name: 'Precipitation',
                        type: 'bar',
                        yAxisIndex: 1,
                        data: [1, 5, 1]
                    },
                    {
                        name: 'Temperature',
                        type: 'line',
                        yAxisIndex: 2,
                        data: [2.0, 2.2, 3.3, 4.5, 6.3, 10.2, 20.3, 23.4, 23.0, 16.5, 12.0, 6.2]
                    }
                ]
            };
            option && myChart.setOption(option);
        }
    }
};
</script>

<style scoped>
#main{
    width: 1000px;
    height: 500px;
}
</style>